<template>
	<view class="wrap">
		<js-error mode="bottom" ref="jsError"></js-error>
		<!-- <u-sticky class="u-sticky">
			<view class="cu-bar search" style="padding: 10px">
			  <u-search
			    v-model="barCode"
			    ref="uSearch"
			    :focus="focus"
			    placeholder="请先聚焦后扫描"
			    :show-action="false"
			    @search="confirm"
			  ></u-search>
			  <view style="margin-left: 10px; display: flex; flex-direction: column">
			    <u-icon @click="search" name="scan" size="50"></u-icon>
			  </view>
			</view>
		</u-sticky> -->
		
		<view>
			<!-- :style="{ height: scrollViewHeight + 'px' }" -->
			<u-form class="form" :model="model" :rules="rules" ref="uForm" label-position="left" style="padding: 0 10px">
				<scroll-view
				  scroll-y="true"
				  class="scroll-view-class"
				>					
					<u-form-item label="工装名称" prop="basMoldName" label-width="180" required>
						<u-input placeholder=" " v-model="model.basMoldName" type="text" maxlength="64" :disabled="true"></u-input>
					</u-form-item>
					<u-form-item label="工装编码" prop="moldCode" label-width="180">
						<u-input placeholder=" " v-model="model.moldCode" type="text" maxlength="64" :disabled="true"></u-input>
					</u-form-item>
					<u-form-item label="工装尾号" prop="lastNum" label-width="180">   <!--:disabled="true"-->
						<u-input placeholder=" " v-model="model.lastNum" type="text" maxlength="64" :disabled="true"></u-input>
					</u-form-item>
					<u-form-item label="工序" prop="operCode" label-width="180">
						<u-input placeholder=" " v-model="model.operCode" type="text" maxlength="64" :disabled="true"></u-input>
					</u-form-item>
					<u-form-item label="设备名称" prop="devName" label-width="180">
						<u-input placeholder=" " v-model="model.devName" type="text" maxlength="64" :disabled="true"></u-input>
					</u-form-item>
					<u-form-item label="登记日期" prop="ddate" label-width="180">
						<!-- <u-input placeholder="请输入" v-model="model.ddate" type="text" maxlength="64"></u-input> -->
						{{ model.ddate ? model.ddate : " " }}
					</u-form-item>
					<u-form-item label="维修日期" prop="repairDate" label-width="180">
						<!-- <u-input placeholder="请输入" v-model="model.repairDate" type="text" maxlength="64"></u-input> -->
						{{ model.repairDate ? model.repairDate : " " }}
					</u-form-item>
					<u-form-item label="保养内容" prop="keepDesc" label-width="180" required>
						<u-input placeholder=" " v-model="model.keepDesc" type="textarea"  height="100" maxlength="500" :disabled="model.status == '0'||model.status == '1'||model.status == '4'? true : false"></u-input>
					</u-form-item>
					<u-form-item label="保养时长(小时)" prop="keepTime" label-width="180">
						<u-input placeholder=" " v-model="model.keepTime" type="digit" di  maxlength="64" :disabled="true">
							<template slot="suffix">小时</template>
						</u-input>
					</u-form-item>
					<u-form-item label="送保人" prop="createByName" label-width="180" required>
						<u-input placeholder=" " v-model="model.createByName" type="text"  height="100" maxlength="500" :disabled="true"></u-input>
					</u-form-item>
					<u-form-item label="模具保养人" prop="repairName" label-width="180" required>
						<u-input placeholder=" " v-model="model.repairCode" type="text" maxlength="64" @blur="blurRepairName" :clearable="false" :disabled="true"></u-input>
						<!-- <js-select v-model="model['repairName']" :showFilter="false" :items="userStyleList" placeholder="请选择" :tree="true"
							:label-value="model['repairName']" @label-input="model['repairName'] = $event" itemValue="id" itemLabel="name"></js-select> -->
					</u-form-item>
					<u-form-item label="备注" prop="remarks" label-width="180" label-position="bottom">
						<u-input type="textarea" placeholder=" " v-model="model.remarks" height="100" maxlength="500" :disabled="true"/>
					</u-form-item>
				</scroll-view>
				
				
				
			</u-form>
			<!-- <view class="form-footer cu-bar foot">
				 <js-bpm-button
				   v-model="model.bpm"
				   :biz-key="model.id"
				   form-key="ASD_MOLD_REPAIR"
				   @complete="submit"
				 ></js-bpm-button>
			</view> -->
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model: {},
				focus:false,
				barCode: "",
				rules: {
					basMoldName: [
						{
							required: true,
							message: '请扫描工装',
							trigger: ['change','blur'],
						},
					],
				},
				// date: new Date().toISOString().substring(0, 10),
				date: '',
				scrollViewHeight:0,
				formFooterHeight: 0,
				headerHeight: 0,
				x: 650, //x坐标
				y: 650, //y坐标
				rdStyleList:[],
				userStyleList:[]
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(e) {
			if(!!e.id){
				this.getForm(e.id)
			}
		},
		mounted() {
		  // this.calculateScrollViewHeight();
		  this.getrdStyleTreeData()
		},
		methods:{
			getForm(id){
				this.$u.api.asd.repairForm({id}).then(res => {
					console.log('res',res)
					this.model = res.asdMoldUpdate
					this.model.basMoldName = res.asdMoldUpdate?.basMold?.name
					console.log('operName',this.model['basOper.operName'])
					// this.rdStyleList = res
				})
			},
			getrdStyleTreeData(){
				this.$u.api.asd.operTreeData().then(res => {
					console.log('res',res)
					this.rdStyleList = res
				})
				this.$u.api.asd.empUserTreeData().then(res => {
					this.userStyleList = res
				})
			},
			DateChange(item, e) {
			  console.log(item, e);
			  //   this.date = e.detail.value;
			  if (item === "repairDate") {
			    this.model.repairDate = e.detail.value;
			  } else if(item === "ddate"){
				this.model.ddate = e.detail.value;
			  }
			  this.$forceUpdate();
			},
			submit(){
				this.$refs.uForm.validate(valid => {
					console.log('valid',valid)
					if (valid) {
						// this.model.basMold.name = this.model.basMoldName
						this.model.basMold = {
							name: this.model.basMoldName
						}
						this.$u.api.asd.repairSave(this.model).then(res => {
							if(res.result == "true"){
								this.$u.toast(res.message);
								setTimeout(() => {
								  uni.navigateBack({
								    delta: 1,
								  });
								}, 500);
							}else{
								this.$refs.jsError.showError('', res.message, 'error');
							}
						});
					} else {
						this.$u.toast('您填写的信息有误，请根据提示修正。');
					}
				});
			},
			async calculateScrollViewHeight() {
			  	await this.$nextTick(); // 确保DOM更新完成
			  	const query = uni.createSelectorQuery().in(this);
				// 获取form-footer 的高度
				query.select(".form-footer").boundingClientRect((rect) => {
					if (rect && rect.height > 0) { // 确保rect有效且高度大于0
						this.formFooterHeight = rect.height;
					}
				});
				query.select(".u-sticky").boundingClientRect((rect) => {
					if (rect && rect.height > 0) { // 确保rect有效且高度大于0
					this.headerHeight = rect.height;
					// 获取屏幕高度
					const systemInfo = uni.getSystemInfoSync();
					const screenHeight = systemInfo.windowHeight;
					// 计算scroll-view高度
					this.scrollViewHeight = screenHeight - this.headerHeight - this.formFooterHeight;
					console.log(this.scrollViewHeight, 'this.scrollViewHeight');
					} else {
					console.error('无法获取.u-sticky的高度或高度为0');
					}
				}).exec();
			},
			handleFocus() {
			  var _that = this;
			  _that.focus = false;
			  setTimeout(() => {
			    _that.focus = true;
			  }, 500);
			},
			confirm() {
				this.focus = false
				console.log(this.barCode, 'barCode')
				this.barcode1 = this.barCode
				this.commonSearch(this.barCode)
			},
			search() {
				var _that = this;
				_that.focus = false
				
				uni.scanCode({
					scanType: ["barCode", "qrCode"],
					// onlyFromCamera: true,
					success: async (res) => {
						_that.barCode = res.result;
						await _that.commonSearch(res.result)
					},
				});
				
			},
			async commonSearch(barCode) {
				let that = this
				//扫货位
				this.$u.api.asd.analysisMold({
					barCode,
				}).then(res => {
					if (res.result == 'true') {
						this.model.basMoldName = res.data.name
						this.model.moldCode = res.data.code
						this.model.lastNum = res.data.lastNum
						this.$forceUpdate()
						console.log('model',res)
						setTimeout(()=>{
							that.makeSound("cg");
						},500)
						that.$u.toast('成功！');
					} else {
						setTimeout(()=>{
							that.makeSound("sb");
						},500)
						that.$refs.jsError.showError('', res.message, 'error');
					}
					
					setTimeout(() => {
						this.barCode = '';
					}, 500);
					this.handleFocus()
							
				})
			
				setTimeout(() => {
					this.barCode = '';
				}, 500);
			
			},
		}
	}
</script>

<style  lang="scss">
	$all_width: 96rpx;
	$all_height: 96rpx;
	.movable-area1 {
	  z-index: 999;
	  height: 97vh;
	  width: 650rpx;
	  position: fixed;
	  right: $all_width;
	  top: -($all_height + 70rpx);
	  pointer-events: none; //此处要加，鼠标事件可以渗透
	
	  .movable-view {
	    width: $all_width;
	    height: $all_height;
	    pointer-events: auto; //恢复鼠标事件
	
	    image {
	      width: $all_width;
	      height: $all_height;
	    }
	  }
	}
	.cuIcon-titles{
		color:#0081ff;
		font-size: 50rpx;
	}
	.u-form-item{
		background: #fff;
		padding-left: 28rpx;
	}
	.text-xxls{
		font-size: 60rpx;
	}
</style>